<template>
	<div class="app-creat-template">
		<!--新建模板step1-->
		<el-card shadow="never">
			
			<el-tabs v-model="activeTab" type="border-card" >
				
			  <el-tab-pane name="git" label="Git拉取">
			  	<el-form :model="gitFromData" ref="gitRuleFrom" label-width="100px" :rules="gitRules" style="margin:20px;">
			  		<el-form-item  label="git地址：" prop="gitAddress">
			  			<baseInput class="gitipt" :defaultValue="gitFromData.gitAddress" placeholder="请输入git地址" @change="(name,v)=>{this.gitFromData.gitAddress=v}"></baseInput>
			  		</el-form-item>
			  		<el-form-item  label="用户名：" prop="userName">
			  			<baseInput :defaultValue="gitFromData.userName" placeholder="请输入用户名" @change="(name,v)=>{this.gitFromData.userName=v}"></baseInput>
			  		</el-form-item>
			  		<el-form-item  label="密码：" prop="paasWord">
			  			<baseInput :defaultValue="gitFromData.paasWord" placeholder="请输入密码" @change="(name,v)=>{this.gitFromData.paasWord=v}"></baseInput>
			  		</el-form-item>
			  		<el-row>
							<el-col :span="12" style="margin-left: 100px;">
								<el-button @click="testgit()" :loading="loading"  size="small">测试连接</el-button>
							</el-col>
						</el-row>
			  		<el-row>
							<el-col :span="12">
								&nbsp;
							</el-col>
							<el-col :span="12" align="right">
								<el-button :disabled="loading" @click="submit" type="primary" size="small">下一步</el-button>
							</el-col>
						</el-row>
			  	</el-form>
			  </el-tab-pane>
			  
			  <el-tab-pane name="svn" label="SVN拉取">
			  	<el-form :model="svnFromData" ref="svnRuleFrom" label-width="100px" :rules="svnRules" style="margin:20px;">
			  		<el-form-item  label="svn地址：" prop="gitAddress">
			  			<baseInput class="gitipt" :defaultValue="svnFromData.gitAddress" placeholder="请输入svn地址" @change="(name,v)=>{this.svnFromData.gitAddress=v}"></baseInput>
			  		</el-form-item>
			  		<el-form-item  label="用户名：" prop="userName">
			  			<baseInput :defaultValue="svnFromData.userName" placeholder="请输入用户名" @change="(name,v)=>{this.svnFromData.userName=v}"></baseInput>
			  		</el-form-item>
			  		<el-form-item  label="密码：" prop="paasWord">
			  			<baseInput :defaultValue="svnFromData.paasWord" placeholder="请输入密码" @change="(name,v)=>{this.svnFromData.paasWord=v}"></baseInput>
			  		</el-form-item>
			  		<el-row>
							<el-col :span="12" style="margin-left: 100px;">
								<el-button @click="testsvn()" :loading="loading"  size="small">测试链接</el-button>
							</el-col>
						</el-row>
			  		<el-row>
							<el-col :span="12">
								&nbsp;
							</el-col>
							<el-col :span="12" align="right">
								<el-button :disabled="loading" @click="submit" type="primary" size="small">下一步</el-button>
							</el-col>
						</el-row>
			  	</el-form>
			  </el-tab-pane>
			  
			  
			  
			  
			  
			  <el-tab-pane name="upload" label="手动上传">
			  	<el-form :model="uploadFromData" ref="uploadRuleFrom" label-width="100px" :rules="uploadRules" style="margin:20px;">
			  		<el-form-item  label="文件：" prop="filePath">
			  			<span v-if="uploadFromData.fileName">{{uploadFromData.fileName}}&nbsp;&nbsp;</span>
			  			<!--<span class="grey">{{uploadFromData.fileSize}}</span>-->
			  			<webUploader 
			  				:options="{accept:'.zip'}" 
			  				@success="uploadSuccess"
			  				></webUploader>

			  			<el-button 
							  @click="handleGetFile"
								size="mini">
								<i class="iconfont icon-shangchuan"></i>
								服务器拉取
							</el-button>

			  		</el-form-item>
			  		<el-row>
							<el-col :span="12">
								&nbsp;
							</el-col>
							<el-col :span="12" align="right">
								<el-button :disabled="loading" @click="submit" type="primary" size="small">下一步</el-button>
							</el-col>
						</el-row>
			  	</el-form>
			  </el-tab-pane>
			</el-tabs>
			
			
			
		</el-card>
		 
		 <!--  -->
		  <upload-dialog 	ref="uploaddialog" @addSucess="addSucess"></upload-dialog>
	</div>
</template>

<script>

import baseInput from "@/view/components/input/input";
//import uploadBtn from "@/view/components/upload/uploadBtn";
import webUploader from "@/view/components/upload/webUploader";
import {getGitBranchTree,getSvnBranchTree} from "@/service/swagger/BranchClientController"

import uploadDialog from "@/view/components/dialog/uploadDialog";

const rule = {
	gitAddress : [
		{ required: true, message: '请输入git地址', trigger: 'submit' },
	],
	userName : [
		{ required: true, message: '请输入用户名', trigger: 'submit' },
	],
	paasWord : [
		{ required: true, message: '请输入密码', trigger: 'submit' },
	]
}
export default {
	props: [
		
	],
	components: {
		baseInput,
		webUploader,
		uploadDialog
	},
	data() {
		return {
			activeTab : "git" ,
			loading : false ,
			
			gitFromData : {
				repositoryType : "GIT",
				gitAddress: "http://175.6.40.21:8090/Sen/jenkins_demo_docker.git",
				userName : "913168497@qq.com",
				paasWord : "chennengcheng",
				branchList : [], // 项目的分支
			},
			gitRules : rule,
			
			svnFromData : {
				repositoryType : "SVN",
				gitAddress : "",
				userName : "",
				paasWord : "",
				branchList : [], // 项目的分支
			},
			svnRules : Object.assign({},rule,{
				gitAddress : [
					{ required: true, message: '请输入svn地址', trigger: 'submit' },
				],
			}),
			
			uploadFromData : {
				repositoryType : "file",
				filePath : "",
				fileName : "",
				fileSize : "",
				branchList : [],
			},
			uploadRules : {
				filePath : [
					{ required: true, message: '请选择上传文件', trigger: 'submit' },
				],
			},
			
		}
	},
	mounted() {
		
	},
	methods: {
		
		// 验证 git 
		testgit(goNext){
			const validated = this.validataFrom('git');
			if(validated){
				this.loading = true;
				getGitBranchTree({
					...this.gitFromData,
				}).then(ret=>{
					this.loading = false;
					if(ret.data&&ret.data.length){
						this.gitFromData.branchList = ret.data;
						if(!goNext){
							this.$message({
			          message: '成功访问git地址。',
			          type: 'success',
			          duration : 2000,
			        });
						}else{
							this.goNext();
						}
						
					}else{
						this.gitFromData.branchList = [];
						if(!goNext){
							this.$message({
			          message: '访问git地址失败。',
			          type: 'error',
			          duration : 2000,
			        });
		        }
					}
				})
			}
		},
		
		// 验证 svn 
		testsvn(goNext){
			const validated = this.validataFrom('svn');
			if(validated){
				this.loading = true;
				getSvnBranchTree({
					...this.svnFromData,
				}).then(ret=>{
					this.loading = false;
					if(ret.data&&ret.data.length){
						this.svnFromData.branchList = ret.data;
						if(!goNext){
							this.$message({
			          message: '成功访问svn地址。',
			          type: 'success',
			          duration : 2000,
			        });
						}else{
							this.goNext();
						}
						
					}else{
						this.svnFromData.branchList = [];
						if(!goNext){
							this.$message({
			          message: '访问svn地址失败。',
			          type: 'error',
			          duration : 2000,
			        });
		        }
					}
				})
			}
		},
		
		testupload(goNext){
			const validated = this.validataFrom('upload');
			if(validated){
				if(goNext){
					this.goNext();
				}
			}
		},
		
		uploadSuccess(name,{res,file}){
			this.uploadFromData= {
				repositoryType : "file",
				filePath : res.data.filePath.replace("////","//"),
				fileName : file.name,
				fileSize : "" , //file.size + "B",
				branchList : [],
			}
			this.$refs["uploadRuleFrom"].clearValidate();
		},
		
		// common validata
		validataFrom(name){
			let _valid = false ;
			if(['git','svn','upload'].indexOf(name)==-1){
				return _valid 
			}
			this.$refs[name+"RuleFrom"].validate((valid) => {
        if (valid) {
          _valid =  true ;
        }
      });
      return _valid ;
		},
		
		// common submit
		submit(){
			this["test" + this.activeTab](true);
		},
		
		goNext(){
			const data = this[this.activeTab +'FromData']
			this.$emit("submit", {
				...data,
				resourceUrl : data.gitAddress || data.filePath ,
			})
		},
		handleGetFile(){
			 this.$refs.uploaddialog.open()
		},
		addSucess(data){
			this.uploadFromData= {
				repositoryType : "file",
				filePath : data.mntPath.replace("////","//"),
				fileName : data.name,
				fileSize : "" , //file.size + "B",
				branchList : [],
			}
			this.$refs["uploadRuleFrom"].clearValidate();
		}
	}
}
</script>

<style lang="scss" >
	.app-creat-template{
		.el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
			border-color: #dcdfe6;
		}
		.gitipt .el-input {
			width: 320px !important;
		}
	}
</style>